/<template>
  <el-dialog
    append-to-body
    :visible.sync="visiable"
    title="选择节点关系"
    width="40%"
    @close="cancel"
  >
    <header style="display: flex;margin-bottom: 20px;">
      <div style="display: flex;justify-content: space-between;">
        <el-input
          v-model="relationshipParams.name"
          placeholder="请输入节点名称"
          style="margin-right: 10px;"
          clearable
        ></el-input>
        <el-button type="primary" size="small" @click="search">搜索</el-button>
        <el-button type="primary" size="small" @click="reset">重置</el-button>
      </div>
    </header>
    <main>
      <el-table
        :data="nodeoptions"
        stripe
        height="37vh"
        @selection-change="tableSelectionChange"
        ref="rightMultipleTable"
      >
        <el-table-column type="selection" width="80" />
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column prop="name" label="节点名称" />
        <el-table-column prop="nodeType" label="节点类型" />
      </el-table>

      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="relationshipParams.pageCurrent"
        :page-sizes="[20, 60, 80, 100]"
        :page-size="relationshipParams.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        size="small"
      >
      </el-pagination>
    </main>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="handleSave">确定</el-button>
      <el-button @click="cancel">取消</el-button>
    </span>
  </el-dialog>
</template>

<script>
import { getNodeRelationSelect } from '@/api/newknowledge/index.js'
export default {
  props: {
    selectCallback: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      visiable: false,
      relationshipParams: {
        pageSize: 20,
        pageCurrent: 1,
        name: ''
      },
      total: 0,
      checkType: '',
      nodeoptions: [],
      tableSelect: [],
      allNodeTotal: 0
    }
  },
  mounted() {},
  methods: {
    /** 选择 */
    tableSelectionChange(val) {
      this.tableSelect = val
      if (val.length > 1) {
        val.forEach(key => {
          if (key !== val[val.length - 1]) {
            this.$refs.rightMultipleTable.toggleRowSelection(key, false)
          }
        })

        this.$refs.rightMultipleTable.clearSelection()
        this.$refs.rightMultipleTable.toggleRowSelection(
          val[val.length - 1],
          true
        )
      }
    },
    /** 关于分页 */
    handleSizeChange(val) {
      this.relationshipParams.pageSize = val
      this.getKnowledgeGraph(false)
    },
    handleCurrentChange(val) {
      this.relationshipParams.pageCurrent = val
      this.getKnowledgeGraph(false)
    },

    /** 打开弹窗 */
    openModel(type, total) {
      this.visiable = true
      this.checkType = type // 选择的是开始还是结束节点
      this.total = total // 总条数
      this.allNodeTotal = total // 保存一下总条数
      this.getKnowledgeGraph(false)
    },
    /** 搜索 */
    search() {
      this.relationshipParams.pageCurrent = 1
      this.getKnowledgeGraph(true)
    },
    /** 重置 */
    reset() {
      this.relationshipParams.pageSize = 20
      this.relationshipParams.pageCurrent = 1
      this.relationshipParams.name = ''
      this.getKnowledgeGraph(false)
      this.total = this.allNodeTotal
    },
    /** 关闭弹窗 */
    cancel() {
      this.relationshipParams.pageSize = 20
      this.relationshipParams.pageCurrent = 1
      this.relationshipParams.name = ''
      this.visiable = false
    },
    /** 确定选择 */
    handleSave() {
      if (this.tableSelect.length === 0) {
        this.$message({
          type: 'warning',
          message: '请选择节点关系'
        })
        return
      }
      console.log(this.checkType, this.tableSelect)
      this.$emit('selectCallback', this.checkType, this.tableSelect)
      this.visiable = false
      // 根据弹窗打开时，决定给谁赋值
    },
    /** 获取开始/结束节点下拉框 */
    getKnowledgeGraph(flag) {
      getNodeRelationSelect(this.relationshipParams).then(res => {
        this.nodeoptions = res.data.data
        // 为真的时候，才会改变总条数
        if (flag) {
          this.total = res.data.data.length
        } else {
          this.total = this.allNodeTotal
        }
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-table .el-table__header-wrapper .el-table__header th .el-checkbox {
  display: none;
}
</style>
